<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户资金管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../../../xbr_layui_extend/layui-v2.6.8/css/layui.css">
    <style>
        .layui-layout-admin {position: fixed; bottom: 0; left: 0; width: 100%; height: 50px;}
        .layui-layout-admin .layui-footer{padding: 10px 0; text-align: center;left: 0}
    </style>
</head>
<body>
<div class="layui-fluid" style="padding:15px">
    <form class="layui-form layui-form-pane" action="" lay-filter="form-add" id="userForm" method="post">
        <div class="layui-form-item" id="payAcc">
            <label class="layui-form-label">付款人账户</label>
            <div class="layui-input-block">
                <select id="bankcard" name="bankcardId" lay-filter="bankcard" ></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">收款人账户</label>
            <div class="layui-input-block">
                <input class="layui-input" name="inAcctNo" lay-verify="required" placeholder="请输入收款人账户">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">收款人名称</label>
            <div class="layui-input-block">
                <input class="layui-input" name="inAcctName" lay-verify="required" placeholder="请输入收款人名称">
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">收款银行</label>
                    <div class="layui-input-block">
                        <select id="inAcctBank" name="inAcctBankId" lay-filter="inAcctBank" lay-verify="required" placeholder="请输入收款银行" lay-search=""></select>
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label">所在城市</label>
                    <div class="layui-input-block">
                        <select id="inAcctCity" name="inAcctCityId" lay-filter="inAcctCity" lay-verify="required" placeholder="请输入收款城市" lay-search=""></select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">获取开户行</label>
            <div class="layui-input-block">
                <select id="inAcctBankNode" name="inAcctBankNode" lay-filter="inAcctBankNode" lay-verify="required" placeholder="请输入获取开户行" lay-search="">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">转出金额</label>
            <div class="layui-input-inline">
                <input class="layui-input" name="tranAmount" lay-verify="required" placeholder="请输入转出金额">
            </div>
            <span style="line-height: 40px">元</span>
        </div>
        <!--提交按钮-->
        <div class="layui-form-item layui-layout-admin">
            <div class="layui-input-block">
                <div class="layui-footer">
                    <a class="layui-btn" lay-submit="" lay-filter="post-add"><i class="layui-icon">&#xe605;</i>立即提交</a>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="../../../xbr_layui_extend/layui-v2.6.8/layui.js"></script>
<script>
    function child(callback){
        layui.extend({
            admin: '/platform/xbr_layui_extend/admin' //集成路径
        }).use(["admin", 'form'], function () {
            const $ = layui.$, form = layui.form, admin = layui.admin;
            let bankcardList, bankList, cityList,openBankList;
            let bankcard, inAcctBank, inAcctCity, openBank;
            //需要返回时
            if (callback != null) $("#payAcc").hide();
            ///函数栈
            queryPayBankCard(function (cardList) {
                bankcardList = cardList;
                bindOptions($("#bankcard"), cardList, (item) => item.id, function (item) {
                    const endNo = item['bankAccNo'].substring(item['bankAccNo'].length - 4, item['bankAccNo'].length);
                    return item['bankName'] + "(****" + endNo + ')';
                });
                getCityList(function (dataList) {
                    cityList = dataList;
                    bindOptions($("#inAcctCity"), cityList, (item) => item.id, (item) => item['cityName']);
                    form.render(null, 'form-add');
                });
                getBankList(function (dataList) {
                    bankList = dataList;
                    bindOptions($("#inAcctBank"), bankList, (item) => item.id, (item) => item['cnName']);
                    form.render(null, 'form-add');
                });
                form.render(null, 'form-add');
            });

            function loadBankCodePage() {
                if (inAcctBank == null || inAcctCity == null) return;
                queryBankCodePage(inAcctBank['shortName'], inAcctCity['cityName'], null, function (data) {
                    openBankList = data.list;
                    bindOptions($("#inAcctBankNode"), data.list, (item) => item.id, (item) => item['bankBranchName']);
                    form.render(null, 'form-add');
                });
            }

            ///SELECT监听: 银行卡选择
            form.on('select(bankcard)', function (data) {
                let filter = bankcardList.filter(item => item.id === data.value);
                bankcard = filter.length > 0 ? filter[0] : null;
            });

            ///SELECT监听: 银行类型
            form.on('select(inAcctBank)', function (data) {
                let filter = bankList.filter(item => item.id === data.value);
                inAcctBank = filter.length > 0 ? filter[0] : null;
                loadBankCodePage()
            });

            ///SELECT监听：城市列表
            form.on('select(inAcctCity)', function (data) {
                let filter = cityList.filter(item => item.id === data.value);
                inAcctCity = filter.length > 0 ? filter[0] : null;
                loadBankCodePage()
            });

            ///SELECT监听：开户行
            form.on('select(inAcctBankNode)', function (data) {
                let filter = openBankList.filter(item => item.id === data.value);
                openBank = filter.length > 0 ? filter[0] : null;
            });

            //FROM监听： 上传完毕 提交表单
            form.on('submit(post-add)', function (data) {
                const postField = data.field;
                if (bankcard != null) {
                    postField.outAcctNo = bankcard['bankAccNo'];
                    postField.outAcctName = bankcard['holdCardName'];
                    postField.outBankShortName = bankcard['bankShortName'];
                }
                if (openBank != null){
                    postField.inAcctBankNode= openBank['bankCode'];
                    postField.inAcctRecCode= openBank['bankCode'];
                    postField.inAcctBankName= openBank['bankBranchName'];
                    postField.inAcctProvinceCode = openBank['areaCode'];
                    postField.inAcctCityName = openBank['city'];
                    postField.inBankShortName = openBank['bankShortName'];
                }
                if (callback!=null) callback(postField);
                layer.confirm('确认提交?', {icon: 3, title:'提示'}, function(index){
                    if ($("#bankcard").val()==="") {
                        layer.msg("请选择银行账户");
                        return ;
                    }
                    admin.req({
                        url: "/platform/pab/singleTrade",
                        data: postField,
                        done: function (res) {
                            layer.msg("支付发起成功", {offset: 'auto', icon: 1,time:1000});
                            const index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                            parent.layer.close(index);
                        }
                    });
                });
                return false;
            });

            //绑定下拉选项
            function bindOptions(jqElm, dataList, valueBack, labelBack) {
                jqElm.empty();
                jqElm.append('<option value="">请选择</option>');
                for (let item of dataList) {
                    jqElm.append('<option value="' + valueBack(item) + '">' + labelBack(item) + '</option>');
                }
            }

            //获取付款人（平台）银行卡列表
            function queryPayBankCard(callback) {
                admin.req({
                    url: "/platform/bank/getBankCardList",
                    data: {"bankShortName": "SPABANK"},
                    done: function (res) {
                        callback(res.data);
                    }
                });
            }

            //获取城市列表
            function getCityList(callback) {
                admin.req({
                    url: "/platform/bank/getCityList",
                    data: {"bankShortName": "SPABANK"},
                    done: function (res) {
                        callback(res.data);
                    }
                });
            }

            //获取银行列表
            function getBankList(callback) {
                admin.req({
                    url: "/platform/bank/getBankList",
                    data: {"bankShortName": "SPABANK"},
                    done: function (res) {
                        callback(res.data)
                    }
                });
            }

            //获取开户行列表
            function queryBankCodePage(shortName, cityName, bankName, callback) {
                admin.req({
                    url: "/platform/bank/queryBankCodePage",
                    data: {bankShortName: shortName, cityName: cityName, bankName: bankName,page:1,limit:9999},
                    done: function (res) {
                        callback(res.data)
                    }
                });
            }
        });
    }
</script>
</body>
</html>